<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>



<div id="example1" style="height:200px;width:400px;border:1px solid blue">
    <!--编写顺序与显示顺序不一致，虽然没问题，但有点儿别扭-->
    <div style="width:20%;height:100px;background-color: red;float: right"></div>
    <div style="margin-right:20%;background-color: lightgrey">
        <p>右侧固定流体布局float 此处改为margin试试看，与连续的float的码砖块式布局相比较，感受下本方法的优点。
            另外，留意padding可以用百分数哦！
        </p>
        <p>
            编写顺序与显示顺序不一致，虽然没问题，但有点儿别扭。
        </p>
    </div>
</div>


<div id="example2" style="height:200px;width:400px;border:1px solid blue">
    <!--编写顺序与显示顺序不一致，虽然没问题，但有点儿别扭-->

    <div style="margin-right:20%;background-color: grey;float:left;">
        <p>单侧固定流体布局float2，这次编写顺序与显示顺序一致了，使用了负margin技术.....

        </p>

    </div>
    <div style="width:20%;height:100px;background-color: red;margin-left:-20%;float: right;"></div>
</div>

<div id="example3" style="height:200px;width:400px;border:1px solid blue">经典双飞翼布局技术见课本</div>

</body>
</html>